<template>
	<view v-if="pageInit" class="login-container">
		<view class="logo-content" @tap="logoTap">
			<image style="width: 100rpx;height: 100rpx;" :alt="sysBaseConfig.SNOWY_SYS_NAME"
				src="https://sanitation-iot2.obs.cn-south-1.myhuaweicloud.com/logo/400_400.png" mode="widthFix">
			</image>
			<text class="title">智慧环卫</text>
		</view>
		<view class="login-form-content">
			<view class="input-item">
				<u-icon class="icon" name="home-fill" size="20" color="#999"></u-icon>
				<input v-model="domainName" class="input" type="text" placeholder="请输入企业简称" maxlength="30" />
			</view>
			<view class="input-item">
				<u-icon class="icon" name="account-fill" size="20" color="#999"></u-icon>
				<input v-model="loginForm.account" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item">
				<u-icon class="icon" name="lock-fill" size="20" color="#999"></u-icon>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="input-item" v-if="sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN === 'true'">
				<u-icon class="icon" name="empty-permission" size="20" color="#999"></u-icon>
				<input v-model="loginForm.validCode" type="text" class="input" placeholder="请输入验证码" maxlength="4" />
				<image :src="validCodeBase64" @click="loginCaptcha" class="login-code-img"></image>
			</view>
			<view>
				<button @click="handleLogin" class="login-btn" type="primary">登录</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getPicCaptcha,
		getTenSelector
	} from '@/api/login'
	import store from '@/store'
	import {
		getToken
	} from '@/utils/auth'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	import onFeedTap from '@/utils/feedTap'
	let that = null
	export default {
		data() {
			return {
				domainName: (storage.get(constant.tenantInfo) && storage.get(constant.tenantInfo).name) || "",
				loginForm: {
					domain: '',
					account: '',
					password: '',
					validCode: '',
					validCodeReqNo: '',
				},
				validCodeBase64: "",
				tenantList: [],
				pageInit: false,
			}
		},
		onLoad(options) {
			that = this
			that.loginForm.account = storage.get(constant.account) || ""
			that.loginForm.password = storage.get(constant.password) || ""
			if (that.checkLogin()){
				uni.$snowy.tab.reLaunch('/pages/tabList/home/index')
				// uni.$snowy.tab.reLaunch('/pages/vehicle/track/index')
			}else{
				that.getTenSelector()
				that.pageInit = true
			}		
		},
		computed: {
			...mapState({
				sysBaseConfig: state => state.global.sysBaseConfig,
				tenantInfo: state => state.global.tenantInfo
			}),
		},
		watch: {
			domainName: {
				handler: function observer(val) {
					// console.log("domainName:",val)
					if (this.domainName && this.domainName.length > 0) {
						if (this.tenantList.length > 0) {
							for (var i in this.tenantList) {
								var item = this.tenantList[i]
								if (item.name == this.domainName) {
									var obj = {
										domain: item.domain,
										name: item.name
									}
									// console.log("domainName0:", obj)
									this.SET_tenantInfo(obj)
									return
								}
							}
						}
					}
					// console.log("domainName1:")
					this.SET_tenantInfo({
						domain: "",
						name: ""
					})
				},
			}
		},
		methods: {
			...mapActions(['Login', 'GetUserLoginMenu', 'GetUserInfo', 'GetDictTypeTreeData']),
			...mapMutations(['SET_tenantInfo']),
			logoTap() {
				uni.$snowy.tab.reLaunch('/pages/config/index')
			},
			loginCaptcha() {
				getPicCaptcha().then(res => {
					that.validCodeBase64 = res.data.validCodeBase64
					that.loginForm.validCodeReqNo = res.data.validCodeReqNo
				})
			},
			getTenSelector() {
				getTenSelector({

				}).then(res => {
					that.tenantList.splice(0, that.tenantList.length)
					for (var i in res.data) {
						that.tenantList.push(res.data[i])
					}
					// console.log("getTenSelector", that.tenantList)
				})
			},
			checkLogin(){
				if (!getToken()){
					return false
				}
				if (!storage.get(constant.userMobileMenus)){
					return false
				}
				if (!storage.get(constant.userInfo)){
					return false
				}
				if (!storage.get(constant.dictTypeTreeData)){
					return false
				}
				return true
			},
			
			
			async handleLogin() {
				if (!(that.tenantInfo.domain && that.tenantInfo.domain.length > 0)) {
					uni.$snowy.modal.msgError("企业简称错误")
				} else if (that.loginForm.account === "") {
					uni.$snowy.modal.msgError("请输入账号")
				} else if (that.loginForm.password === "") {
					uni.$snowy.modal.msgError("请输入密码")
				} else if (that.loginForm.validCode === "" && that.sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN ===
					'true') {
					uni.$snowy.modal.msgError("请输入验证码")
				} else {
					that.pwdLogin()
				}
			},
			async pwdLogin() {
				that.Login(that.loginForm).then(() => {
					// 所有异步请求结束之后才能够进行下一步操作
					Promise.all([
						that.GetUserLoginMenu(),
						that.GetUserInfo(),
						that.GetDictTypeTreeData(),
					]).then((result) => {
						// console.log(result)
						storage.set(constant.account, that.loginForm.account)
						storage.set(constant.password, that.loginForm.password)
						uni.$snowy.tab.reLaunch('/pages/tabList/home/index')
					}).catch(err => {
						onFeedTap()
						if (that.sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN) {
							that.loginCaptcha()
							that.loginForm.validCode = ""
						}
					})
				}).catch(err => {
					onFeedTap()
					if (that.sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN) {
						that.loginCaptcha()
						that.loginForm.validCode = ""
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;
			align-items: center;
			justify-content: center;
			display: flex;

			image {
				border-radius: 4px;
				width: 100upx;
				height: 100upx;
			}

			.title {
				margin-left: 15upx;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;
				display: flex;
				align-items: center;
				padding: 0 20rpx;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

				.login-code-img {
					border: 1px solid var(--border-color-split);
					cursor: pointer;
					width: 70%;
					height: 45px
				}
			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
				background-color: $uni-color-primary;
				border-radius: 1000upx;
				color: #ffffff;
			}
		}
	}

	.login-code-img {
		border: 1px solid var(--border-color-split);
		cursor: pointer;
		width: 70%;
		height: 45px
	}
</style>